<template>
  <div class="meter-container">
    <div class="itemCont" v-for="(item, index) in tableList" :key="index">
      <div class="common-title">
        <p class="line"></p>
        <p class="text">{{ item.title }}</p>
      </div>
      <div class="cont">
        <el-table :data="item.data" border stripe>
          <el-table-column prop="type" label="类别"></el-table-column>
          <el-table-column prop="total" label="总/kWh"></el-table-column>
          <el-table-column prop="tip" label="尖/kWh"></el-table-column>
          <el-table-column prop="peak" label="峰/kWh"></el-table-column>
          <el-table-column prop="flat" label="平/kWh"></el-table-column>
          <el-table-column prop="valley" label="谷/kWh"></el-table-column>
          <el-table-column prop="deepValley" label="深谷/kWh"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 定义表格列表数据
const tableList = ref([
  {
    title: "1# 储能表",
    data: [
      { type: '累计正向总电能（kWh)', total: 100, tip: 10, peak: 20, flat: 30, valley: 25, deepValley: 5 },
      { type: '累计反向总电能（kWh)', total: 100, tip: 10, peak: 20, flat: 30, valley: 25, deepValley: 5 },
      { type: '日正向总电能（kWh)', total: 100, tip: 10, peak: 20, flat: 30, valley: 25, deepValley: 5 },
      { type: '日反向总电能（kWh)', total: 100, tip: 10, peak: 20, flat: 30, valley: 25, deepValley: 5 }
    ]
  },
  {
    title: "2# 储能表",
    data: [
      { type: '累计正向总电能（kWh)', total: 120, tip: 15, peak: 25, flat: 35, valley: 30, deepValley: 10 },
      { type: '累计反向总电能（kWh)', total: 120, tip: 15, peak: 25, flat: 35, valley: 30, deepValley: 10 },
      { type: '日正向总电能（kWh)', total: 120, tip: 15, peak: 25, flat: 35, valley: 30, deepValley: 10 },
      { type: '日反向总电能（kWh)', total: 120, tip: 15, peak: 25, flat: 35, valley: 30, deepValley: 10 }
    ]
  },
  {
    title: "3# 储能表",
    data: [
      { type: '累计正向总电能（kWh)', total: 150, tip: 20, peak: 30, flat: 40, valley: 35, deepValley: 15 },
      { type: '累计反向总电能（kWh)', total: 150, tip: 20, peak: 30, flat: 40, valley: 35, deepValley: 15 },
      { type: '日正向总电能（kWh)', total: 150, tip: 20, peak: 30, flat: 40, valley: 35, deepValley: 15 },
      { type: '日反向总电能（kWh)', total: 150, tip: 20, peak: 30, flat: 40, valley: 35, deepValley: 15 }
    ]
  }
]);
</script>

<style lang="scss" scoped>
.meter-container {
  padding: 0.12rem 0.24rem;
  background: #fff;

  .itemCont {
    margin-bottom: 0.24rem;

    .cont {
      :deep(.el-table th) {
        background: #F2F3F5;

      }
    }
  }
}
</style>
